<template>
  <div class="body">
    <el-container>
      <!-- 头部导航栏 -->
      <el-header>
        <Index></Index>
      </el-header>
      <!-- 左侧边栏 -->

      <el-container>
        <el-container>
          <el-main style="margin-top:30px;">
            <el-row>
              <el-col :span="6">.</el-col>
              <el-col :span="6">
                <Datepicker1 class="datepicker"></Datepicker1>
              </el-col>
              <el-col :span="6">
                <span class="demonstration">
                  <font style="color:white">开始结束日期：</font>
                </span>
              </el-col>
              <el-col :span="6">
                <Datepicker2></Datepicker2>
              </el-col>

              <!-- <div class="block" style="margin-left:40%;">
               
              
              </div>-->
            </el-row>
            <el-row>
              <div id="allmap"></div>
            </el-row>
          </el-main>
        </el-container>
      </el-container>

      <Bottom></Bottom>
    </el-container>
  </div>
</template>
<script>
import echarts from 'echarts'
import Index from '~/components/index2'
import Bottom from '~/components/bottom'
import Datepicker1 from '~/components/datepicker1.vue'
import Datepicker2 from '~/components/datepicker2.vue'

export default {
  data() {
    return {
      tableData: [
        {
          date1: '参数一',
          date2: '0.3'
        },
        {
          date1: '参数二',
          date2: '0.4'
        },
        {
          date1: '参数三',
          date2: '0.5'
        },
        {
          date1: '参数四',
          date2: '0.6'
        }
      ],

      activeIndex: '1',
      value1: '',
      value2: '',
      activeName: 'first',

      center: { lng: 116.404, lat: 39.915 },
      zoom: 12,
      scroll: true,
      onlinelist: [],
      list1: [],
      list: [],
      offlinelist: [],
      online: [],
      offline: [],

      onlinenumber: 0,
      offlinenumber: 0,
      totalnumber: 0,
      echartsdata1: [],
      echartsdata2: [],
      echartsdata3: [],
      echartsdata4: [],
      echartsdata5: [],
      echartsdata6: [],
      echartsdata7: [],
      echartsdata8: []
    }
  },
  components: {
    Index,
    Bottom,
    Datepicker1,
    Datepicker2
  },
  created() {},

  mounted() {
    this.value1 = this.getNowFormatDate()

    this.value2 = this.value1
    console.log(this.value2)
    this.echartsdata1 = [
      0,
      1,
      2,
      3,
      4,
      5,
      6,
      7,
      8,
      9,
      10,
      9,
      8,
      7,
      6,
      5,
      4,
      3,
      2,
      1,
      0
    ]
    // this.laterpowercurve()
    this.showecharts()
  },

  methods: {
    //根据日期选择功率曲线

    //时间格式转换器
    getNowFormatDate() {
      var date = new Date()
      var seperator1 = '-'
      var year = date.getFullYear()
      var month = date.getMonth() + 1
      var strDate = date.getDate()
      if (month >= 1 && month <= 9) {
        month = '0' + month
      }
      if (strDate >= 0 && strDate <= 9) {
        strDate = '0' + strDate
      }
      var currentdate = year + seperator1 + month + seperator1 + strDate
      return currentdate
    },
    //通用时间格式转换器
    getFormatDate(date) {
      var seperator1 = '-'
      var year = date.getFullYear()
      var month = date.getMonth() + 1
      var strDate = date.getDate()
      if (month >= 1 && month <= 9) {
        month = '0' + month
      }
      if (strDate >= 0 && strDate <= 9) {
        strDate = '0' + strDate
      }
      var currentdate = year + seperator1 + month + seperator1 + strDate
      return currentdate
    },
    //延迟执行函数
    laterpowercurve() {
      setTimeout(() => {
        this.showecharts()
      }, 2000)
    },
    powercurve() {
      let myChart3 = this.$echarts.init(document.getElementById('allmap'))
      let option3 = {
        title: {
          text: '功率曲线图（单位/kW）',
          color: '#ffffff',
          textStyle: {
            fontWeight: 'normal', //标题颜色
            color: '#FFFFFF'
          }
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross',
            label: {
              backgroundColor: '#6a7985'
            }
          }
        },
        legend: {
          textStyle: {
            fontWeight: 'normal', //标题颜色
            color: '#FFFFFF'
          },
          data: [
            '总发电功率曲线',
            '功率型储能放电功率曲线',
            '电容性储能放电功率曲线',
            '卧式风力发电功率曲线',
            '垂直风力发电功率曲线',
            '光伏发电功率曲线',
            '负荷需求功率曲线',
            '燃气机发电功率曲线'
          ]
        },
        toolbox: {
          feature: {
            saveAsImage: {}
          }
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: [
          {
            type: 'category',
            boundaryGap: false,
            axisLabel: {
              show: true,
              textStyle: {
                color: '#ffffff'
              }
            },

            data: [
              '0:00',
              '0:15',
              '0:30',
              '0:45',
              '1:00',
              '1:15',
              '1:30',
              '1:45',

              '2:00',
              '2:15',
              '2:30',
              '2:45',
              '3:00',
              '3:15',
              '3:30',
              '3:45',
              '4:00',
              '4:15',
              '4:30',
              '4:45',
              '5:00',
              '5:15',
              '5:30',
              '5:45',
              '6:00',
              '6:15',
              '6:30',
              '6:45',
              '7:00',
              '7:15',
              '7:30',
              '7:45',
              '8:00',
              '8:15',
              '8:30',
              '8:45',
              '9:00',
              '9:15',
              '9:30',
              '9:45',
              '10:00',
              '10:15',
              '10:30',
              '10:45',
              '11:00',
              '11:15',
              '11:30',
              '11:45',
              '12:00',
              '12:15',
              '12:30',
              '12:45',
              '13:00',
              '13:15',
              '13:30',
              '13:45',
              '14:00',
              '14:15',
              '14:30',
              '14:45',
              '15:00',
              '15:15',
              '15:30',
              '15:45',
              '16:00',
              '16:15',
              '16:30',
              '16:45',
              '17:00',
              '17:15',
              '17:30',
              '17:45',
              '18:00',
              '18:15',
              '18:30',
              '18:45',
              '19:00',
              '19:15',
              '19:30',
              '19:45',
              '20:00',
              '20:15',
              '20:30',
              '20:45',
              '21:00',
              '21:15',
              '21:30',
              '21:45',
              '22:00',
              '22:15',
              '22:30',
              '22:45',
              '23:00',
              '23:15',
              '23:30',
              '23:45',
              '24:00(单位/时间)'
            ]
          }
        ],
        yAxis: [
          {
            type: 'value',
            axisLabel: {
              show: true,
              textStyle: {
                color: '#ffffff'
              }
            }
          }
        ],
        series: [
          {
            name: '总发电功率曲线',
            type: 'line',
            stack: '总量1',
            itemStyle: {
              normal: {
                lineStyle: {
                  color: '#F8F8FA'
                }
              }
            },
            areaStyle: {},
            data: this.echartsdata1
          },
          {
            name: '功率型储能放电功率曲线',
            type: 'line',
            stack: '总量2',
            areaStyle: {},
            data: this.echartsdata2
          },
          {
            name: '电容性储能放电功率曲线',
            type: 'line',
            stack: '总量3',
            areaStyle: {},
            data: this.echartsdata3
          },
          {
            name: '卧式风力发电功率曲线',
            type: 'line',
            stack: '总量4',
            label: {
              normal: {
                show: false,
                position: 'top'
              }
            },
            areaStyle: {},
            data: this.echartsdata4
          },
          {
            name: '垂直风力发电功率曲线',
            type: 'line',
            stack: '总量5',
            label: {
              normal: {
                show: false,
                position: 'top'
              }
            },
            areaStyle: {},
            data: this.echartsdata5
          },
          {
            name: '光伏发电功率曲线',
            type: 'line',
            stack: '总量6',
            areaStyle: {},
            data: this.echartsdata6
          },
          {
            name: '负荷需求功率曲线',
            type: 'line',
            stack: '总量7',
            label: {
              normal: {
                show: false,
                position: 'top'
              }
            },
            areaStyle: {},
            data: this.echartsdata7
          },

          {
            name: '燃气机发电功率曲线',
            type: 'line',
            stack: '总量8',
            label: {
              normal: {
                show: false,
                position: 'top'
              }
            },
            areaStyle: {},
            data: this.echartsdata8
          }
        ]
      }
      myChart3.setOption(option3)
      //建议加上以下这一行代码，不加的效果图如下（当浏览器窗口缩小的时候）。超过了div的界限（红色边框）
      window.addEventListener('resize', function() {
        myChart3.resize()
      })
    },
    showecharts() {
      let myChart1 = this.$echarts.init(document.getElementById('allmap'))
      let option = {
        // backgroundColor: '#005A5B',
        title: {
          // text: '配电网(单位/伏特)',
          textStyle: {
            color: '#ffffff'
          }
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross',
            label: {
              backgroundColor: '#6a7985'
            }
          }
        },
        legend: {
          data: ['配电网']
        },
        toolbox: {
          feature: {
            saveAsImage: {}
          }
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: [
          {
            type: 'category',
            boundaryGap: false,
            axisLabel: {
              show: true,
              textStyle: {
                color: '#ffffff'
              }
            },
            data: [
              '1.0',
              '2.0',
              '3.0',
              '4.0',
              '5.0',
              '6.0',
              '7.0',
              '8.0',
              '9.0',
              '10.0',
              '11.0',
              '12.0',
              '13.0',
              '14.0',
              '15.0',
              '16.0',
              '17.0',
              '18.0',
              '19.0',
              '20.0',
              '21.0',
              '22.0',
              '23.0',
              '24.0'
            ]
          }
        ],
        yAxis: [
          {
            axisLabel: {
              show: true,
              textStyle: {
                color: '#ffffff'
              }
            },
            type: 'value'
          }
        ],
        series: [
          {
            name: '配网',
            type: 'line',
            stack: '总量',
            smooth: true, //曲线平滑
            itemStyle: {
              normal: {
                areaStyle: {
                  type: 'default',
                  //渐变色实现
                  color: new echarts.graphic.LinearGradient(
                    0,
                    0,
                    0,
                    1, //变化度
                    //三种由深及浅的颜色
                    [
                      {
                        offset: 0,
                        color: '#3ebf9b'
                      },
                      {
                        offset: 0.5,
                        color: '#267268'
                      },
                      {
                        offset: 1,
                        color: '#14323f'
                      }
                    ]
                  )
                },
                lineStyle: {
                  //线的颜色
                  color: '#349e85'
                },
                //以及在折线图每个日期点顶端显示数字
                label: {
                  show: true,
                  position: 'top',
                  textStyle: {
                    color: 'white'
                  }
                }
              }
            },

            areaStyle: {},
            data: this.echartsdata1
          }
        ]
      }

      myChart1.setOption(option)
      //建议加上以下这一行代码，不加的效果图如下（当浏览器窗口缩小的时候）。超过了div的界限（红色边框）
      window.addEventListener('resize', function() {
        myChart1.resize()
      })
    },
    handleDelete(index, row) {
      alert(index)
      //  this.$router.push({path:'/details',query: {id:item.device_id}})
      this.$router.push({ path: '/indexx' })
      console.log(index, row)
    },
    handleClick(tab, event) {
      console.log(tab, event)
    },

    logout() {
      window.sessionStorage.clear()
      this.$router.push('/login')
    },
    handleSelect(key, keyPath) {
      console.log(key, keyPath)
    },
    handler({ BMap, map }) {
      console.log(BMap, map)
    },

    opencarinfo(item) {
      //  this.$router.push({name:'details',params: {id:'1'}})
      // alert("执行")

      this.$router.push({ path: '/details', query: { id: item.device_id } })
    }
  }
}
</script>
<style lang="scss" scoped>
.datepicker {
  z-index: 99999 !important;
}
#allmap {
  height: 600px;

  color: white;
}

.body {
  width: 100%;
  height: 100%;
  margin-top: 0px;

  background-image: url(../assets/images/新UI12.png);
}
.el-main {
  margin-left: 10px;
  background-image: url(../assets/images/新UI27.png);
  background-repeat: no-repeat;
}
.el-row {
  width: 100%;
  margin-bottom: 20px;
  &:last-child {
    margin-bottom: 0;
  }
}
</style>
